/**
 * [没仓库版]
 */

import React, { Component } from 'react'
import '../../../static/css/han.form.css'
import Han from '../../../components'
const {Icon,Input,Layer,Text,ListJump} = Han

export default class My extends Component {

    state={
        img:'',
        sex:'',
        name:'',
        cardType:'',
        card:'',
        birthDay:'',

        noEdit:true,
        layerShow:false,
        cardOptions:{IDcard:'身份证',passport:'护照'},

        sexShow:false,
        sexOptions:{women:'女',man:'男'}
    }
    // 点击退出
    loginOut=()=>{
        const { $httpReq,$api,props } = this;
        $httpReq($api.LOGIN_OUT(),res=>{
            localStorage.clear()
            props.history.push('/login')
        })
    }

    // 点击编辑&&保存
    setMessage = ()=>{
        const {noEdit,cardType, sex,name,card,birthDay,img} = this.state;
        const {$httpReq,$api} =  this
        if(!noEdit){

            // 数据收集 && 提交
            let submitData = {
                user:localStorage.user,
                sex,
                name,
                cardType,
                card,
                birthDay,
                img
            }

            // 非空校验
           
            // 数据请求
            $httpReq($api.USER_EDIT({submitData}))

        }
        this.setState({noEdit:!noEdit})
    }

    render() {
        const {img,sex,name,card,birthDay,cardType,noEdit,layerShow,cardOptions,sexShow,sexOptions} = this.state
        return (
            <div className="my">

                {/* 头部 */}
                <div className="title">个人中心<span onClick={this.loginOut}>退出</span></div> 

                {/* 账号资料 */}
                <div className="account">
                   <div className="pic"><img src={img}/></div>
                    <p>{localStorage.user}</p>
                </div>

                {/* 实名认证 */}
                <div className="han_type">
                    实名认证
                    <span className="edit" onClick={this.setMessage}>
                        <Icon iconName={noEdit?"editor":"save"}/>
                        {noEdit?'编辑':'保存'}
                    </span>
                </div>

                <div className="message">

                    <Input disabled={noEdit} label="真实姓名" value={name} change={name=>this.setState({name})}/>
                
                    <Text label="证件类型" value={cardOptions[cardType]} btnShow={!noEdit} click={()=>this.setState({layerShow:!layerShow})} />

                    <Layer 
                        layerShow={layerShow}
                        onCancel={()=>this.setState({layerShow:!layerShow})}  
                        onOk={ value =>this.setState({cardType:value,layerShow:!layerShow})}
                        options={cardOptions}
                        defaultValue={cardType}
                    />


                    <Input disabled={noEdit} label="证件号码" value={card} change={card=>this.setState({card,birthDay:card.substring(6,10)+'-'+card.substring(10,12)+'-'+card.substring(12,14)})}/>

                    
                    <Text label="出生日期" value={birthDay} btnShow={false} />
                   

                    <Text label="性别" value={sexOptions[sex]} btnShow={!noEdit} click={()=>this.setState({sexShow:!sexShow})} />
                   
                    <Layer 
                        layerShow={sexShow}
                        onCancel={()=>this.setState({sexShow:!sexShow})}  
                        onOk={ value =>this.setState({sex:value,sexShow:!sexShow})}
                        options={sexOptions}
                        defaultValue={sex}
                    />

                </div>

        
                {/* 我的记录 */}
                <div className="record">
                    <ListJump title="健康信息上报记录" path={{pathname:"/record",state:0}}/>
                    <ListJump title="口罩预约购买记录" path={{pathname:"/record",state:1}}/>
                </div>
            </div>
        )
    }

    componentDidMount(){
        const {$httpReq,$api} = this
        $httpReq($api.USER_SEARCH({user:localStorage.user}),res=>{
            const {img,sex,name,cardType,card,birthDay} = res.data;
            this.setState({img,sex,name,cardType,card,birthDay});
        })
    }
}